
<html>
	<head>
	<meta name=viewport
  content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0,user-scalable=no">
	<meta name="viewport" content="target-densitydpi=device-dpi">
		<style>
			.dashboard
			{
				position:absolute;
				width:100%;
				height:100%;
			}
			
			#content, #map_canvas
			{
				position: absolute;
				width:500px;
				height:600px;
			}
			
			.dashboard tr
			{
				align:center;
			}
			
			.dashboard img
			{
				width:100%;
				height:100%;
				
				background:no-repeat;
				background-size:100% 100%;
				
				border:0;
				font-family:Verdana;
				color:#1F1F1F;
				font-size:32px;
				//font-
				
			}
			
		
		</style>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
		<script src="main.js"></script>
		<script src="comments.js"></script>
		
	</head>
	
	<body>
		<script src="ui.js">
		
		</script>
		
		<div id="content" style="position:absolute;background:gradient()">
		<div id="mapping" style="position:absolute;">
		<span id="filterMap"></span>
		<button id="addplacebutton">Ajouter un nouveau lieu </button>
		<button id="retour">Retour</button>
		<div style="position:relative; background-color: rgb(229, 227, 223); overflow: hidden;" id="map_canvas"></div>
		</div>
		
		<audio preload="auto" id="voice1">
			<source src="voice/restaurant.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		<audio preload="auto" id="voice2">
			<source src="voice/cafe.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		<audio preload="auto" id="voice3">
			<source src="voice/magasin.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		<audio preload="auto" id="voice4">
		
			<source src="voice/cinema.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		<audio preload="auto" id="voice5">
			<source src="voice/culture.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		<audio preload="auto" id="voice6">
			<source src="voice/loisir.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		<audio preload="auto" id="voice7">
			<source src="voice/hotel.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		<audio preload="auto" id="voice8">
			<source src="voice/sante.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		<audio preload="auto" id="voice9">
			<source src="voice/transport.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		<audio preload="auto" id="voice0">
			<source src="voice/tous.ogg" type="audio/ogg" rel="noreferrer" />
		</audio>
		
		
		<table class="dashboard">
			<tr>
				<td>
					<img src="graphics/restaurant.png" id="restaurant"/>
				</td>
				
				<td>
					<img src="graphics/cafe.png" id="cafe"/>
				</td>
				
				<td>
					<img src="graphics/magasin.png" id="magasin"/>
				</td>
			</tr>
			
			
			<tr>
				<td>
					<img src="graphics/cinema.png" id="cinema"/>
				</td>
				
				<td>
					<img src="graphics/culture.png" id="culture"/>
				</td>
				
				<td>
					<img src="graphics/loisir.png" id="loisir"/>
				</td>
			</tr>
			
			<tr>
				<td>
					<img src="graphics/hotel.png" id="hotel"/>
				</td>
				
				<td>
					<img src="graphics/sante.png" id="sante"/>
				</td>
				
				<td>
					<img src="graphics/transport.png" id="transport"/>
				</td>
			</tr>
			<tr>
				<td colspan="3">
					<img src="graphics/all_icon.png" id="tous"/>
				</td>
			</tr>
		</table>
		<div id="add">
			<form method=" " action=" ">

<fieldset >
<legend>Ajouter un type de lieu</legend>
<p>
<label for="categorie" > Categorie</label>
<select id="cat" >
    <option value="1">Restaurant</option>
    <option value="2">Cafe/Bar</option>
    <option value="3">Magasin</option>
    <option value="4">Cinema</option>
    <option value="5">Culture</option>
    <option value="6">Loisir</option>
    <option value="7">Hotel</option>
    <option value="8">Sante</option>
    <option value="9">Transport</option>
</select>

</p>
</fieldset>
</section>

<section class= "place_info">

<fieldset>

<p>
<label for= "name">Nom</label><input type= "text" name= "name" id= "name" required/>
<input type= "button"  value= "Valider" class= "send_button"/>
<input type= "button"  value= "Retour" class="cancel_button"/>
</p>
</fieldset>
</section>
</form>
		</div>
		
		<div id="comments">
			<div id="list_comments">
			</div>
			<button id="comments_add_button" >Add</button>
			<button id="comments_retour" >Retour</button>
		</div>
		<div id="add_comments">
		<button id="add_comments_retour" >Retour</button>
		</div>
	</div>
			</body>
</html>